<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>03_jsx语法规则</title>
		<script src="../js/react.development.js"></script>
		<script src="../js/react-dom.development.js"></script>
		<script src="../js/babel.min.js"></script>
		<style>
			.title {
				background-color: orange;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="test"></div>

	</body>
	<script type="text/babel">
		const mId ="mId";
		const myData ="Hello react";
		const VDOM =(
			<div>
				<h2 className="title" id={mId.toLowerCase()}>
				   <span style={{color:'white',fontSize:'25px'}}>{myData.toLowerCase()}</span>
				</h2>
				<h2 className="title" id={mId.toUpperCase()}>
				   <span style={{color:'white',fontSize:'25px'}}>{myData.toLowerCase()}</span>
				</h2>
				<input type="text"/>
			</div>
		)
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</html>
